<template>
  <el-drawer
    v-model="rechargeVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :with-header="false"
    size="70%"
    class="draw-content"
  >
    <div class="drawer-container">
      <div class="header">
        <div class="title">充值中心</div>
        <div class="btn-wrap" style="margin-right: 40px">
          <el-button @click="handleCancel"> 取消 </el-button>
          <el-button
            style="background-color: #039691; color: #fff"
            @click="handleSubmit"
          >
            提交充值申请
          </el-button>
        </div>
      </div>
      <div class="line" />

      <div class="content">
        <!-- 左侧：充值表单 -->
        <div class="left">
          <!-- <div class="fee-tip">
            您的服务费为：<span class="highlight"
              >{{ (serviceFeePercent * 100).toFixed(1) }}%</span
            >
          </div> -->

          <div class="form-item">
            <div class="label">充值账户：{{ props.accountInfo?.oeid }}</div>
          </div>

          <div class="form-item">
            <div class="label">
              充值币种：{{ selectDictLabel(bus_currency_type, curCoinType) }}
            </div>
            <!-- <el-radio-group v-model="currency">
              <el-radio label="USD"> 美元 </el-radio>
            </el-radio-group> -->
          </div>

          <div class="form-item">
            <div class="label">充值金额</div>
            <div class="amount-grid">
              <div
                v-for="item in bus_media_recharge_package"
                :key="item.value"
                class="amount-item"
                :class="{ active: selectedAmount === item.value }"
                @click="handleSelectPreset(item)"
              >
                <span class="symbol"></span> {{ item.value }}
              </div>
            </div>
            <el-input
              class="custom-amount"
              :model-value="customAmount"
              placeholder="自定义金额"
              @input="handleCustomInput"
            />
          </div>

          <div class="form-item">
            <div class="label">充值方式</div>
            <el-radio-group model-value="wallet">
              <el-radio label="wallet"> 钱包余额 </el-radio>
            </el-radio-group>
          </div>

          <div class="wallet">
            <div>
              钱包余额：<span class="amount">
                {{ balance
                }}{{ selectDictLabel(bus_currency_type, curCoinType) }}</span
              >
            </div>
            <el-button plain style="color: #039691" @click="toRecharge">
              给钱包充值
            </el-button>
          </div>
        </div>

        <!-- 右侧：支付详情 -->
        <div class="right">
          <div class="card">
            <div class="card-title">账户详情</div>
            <div class="rates">
              <div>今 日 汇 率：</div>
              <el-row :gutter="20">
                <el-col
                  :span="10"
                  v-for="(item, index) in rateList"
                  :key="index"
                  ><div class="rates">
                    {{ item.foundationCurrencyName }}-{{
                      item.settlementCurrencyName
                    }}
                    (汇率{{ item.amount }}{{ item.foundationCurrencyName }}={{
                      item.currentExchangerate
                    }}{{ item.settlementCurrencyName }})
                  </div></el-col
                >
              </el-row>
            </div>
            <div class="divider" />
            <div class="label">
              账户类型： {{ selectDictLabel(bus_currency_type, curCoinType) }}
            </div>
            <div class="label">充值账户ID： {{ props.accountInfo?.oeid }}</div>
            <div class="label">支付方式：钱包支付</div>
            <div class="divider" />
            <div class="payable">
              <div class="payable-label">应付金额</div>
              <div class="payable-amount">
                ￥ {{ payable.toLocaleString() }}
              </div>
            </div>
          </div>

          <!-- <div class="card">
            <div class="card-title">支付详情</div>
            <div class="rates">
              <div>今 日 汇 率：</div>
              <el-row :gutter="20">
                <el-col
                  :span="10"
                  v-for="(item, index) in rateList"
                  :key="index"
                  ><div class="rates">
                    {{ item.foundationCurrencyName }}-{{
                      item.settlementCurrencyName
                    }}
                    (汇率{{ item.amount }}{{ item.foundationCurrencyName }}={{
                      item.currentExchangerate
                    }}{{ item.settlementCurrencyName }})
                  </div></el-col
                >
              </el-row>
            </div>

            <el-descriptions :column="1" class="mt16">
              <el-descriptions-item label="支付方式">
                钱包余额
              </el-descriptions-item>
              <el-descriptions-item label="充值金额">
                ￥ {{ amountCNY.toLocaleString() }}（折合人民币）
              </el-descriptions-item>
              <el-descriptions-item label="服务费">
                ￥ {{ serviceFee.toLocaleString() }}
              </el-descriptions-item>
              <el-descriptions-item label="手续费">
                ￥ {{ handlingFee.toLocaleString() }}
              </el-descriptions-item>
              <el-descriptions-item label="增值税费">
                ￥ {{ vatFee.toLocaleString() }}
              </el-descriptions-item>
            </el-descriptions>

            <div class="divider" />
           
          </div> -->
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";

import { selectDictLabel } from "@/utils/ruoyi.js";
import {
  getExchangeRateList,
  transAccountFund,
  foreignCalculate,
} from "@/api/customer_handle/index.js";

import { getUserInfo } from "@/api/login";

const { proxy } = getCurrentInstance();
const { bus_currency_type, bus_media_recharge_package } = proxy.useDict(
  "bus_currency_type",
  "bus_media_recharge_package"
);
const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  accountInfo: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits(["update:modelValue"]);

const rechargeVisible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
const router = useRouter();
const rateList = ref([]);
const balance = ref(0);
const curCoinType = ref("");
const payable = ref(0);
const selectedAmount = ref("");
const customAmount = ref();
function getRateList() {
  getExchangeRateList().then(({ data }) => {
    rateList.value = data;
  });
}
function fetchUserInfo() {
  getUserInfo().then(({ data }) => {
    balance.value = data.accountBalance;
    curCoinType.value = data.currencyType;
  });
}

function getMoney() {
  foreignCalculate({
    localCurrencyType: "1",
    paymentPrice: customAmount.value || selectedAmount.value,
  }).then((res) => {
    payable.value = res.data.price;
    // totalMoney.value = money.value + fee.value;
  });
}
// 钱包充值
const toRecharge = () => {
  rechargeVisible.value = false;
  router.push({
    path: "/fundMng/walletRecharge",
  });
};
function handleSelectPreset(item) {
  selectedAmount.value = item.value;
  customAmount.value = "";
  getMoney();
}

function handleCustomInput(val) {
  customAmount.value = val.replace(/[^0-9.]/g, "");
  const parsed = Number.parseFloat(customAmount.value);
  if (!Number.isNaN(parsed)) selectedAmount.value = parsed;
  getMoney();
}

function handleCancel() {
  rechargeVisible.value = false;
}

async function handleSubmit() {
  try {
    const rechargeAmount = selectedAmount.value || customAmount.value;
    if (!rechargeAmount) {
      proxy.$modal.msgError("请输入或者选择充值金额");
      return;
    }
    if (Number(rechargeAmount) <= 0) {
      proxy.$modal.msgError("充值金额不能小于等于0");
      return;
    }
    if (balance.value <= 0) {
      proxy.$modal.msgError("账户余额不足");
      return;
    }
    if (Number(rechargeAmount) > balance.value) {
      proxy.$modal.msgError("充值金额不能大于账户余额");
      return;
    }
    const params = {
      mediaId: props.accountInfo.id,
      transactionsType: "1",
      amount: rechargeAmount,
    };
    await transAccountFund([params]);
    visible.value = false;
    emits("onSuccess");
    proxy.$modal.msgSuccess("申请成功");
  } catch (error) {}
}

onMounted(() => {
  getRateList();
  fetchUserInfo();
});
</script>

<style lang="scss" scoped>
.drawer-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
    background: #dcdfe6;
  }

  .content {
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 24px;
    height: 100%;
    padding: 20px;
    .label {
      color: #303133;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .left {
      flex: 1;
      height: 100%;
      padding-right: 12px;

      .fee-tip {
        margin-bottom: 16px;
        color: #333;

        .highlight {
          color: #039691;
          font-weight: 600;
        }
      }

      .form-item {
        margin-top: 18px;

        .amount-grid {
          display: grid;
          grid-template-columns: repeat(3, 100px);
          grid-gap: 16px;
          margin-bottom: 12px;

          .amount-item {
            height: 54px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            cursor: pointer;
            background: #f7f8fa;

            &.active {
              background: #e6f7ff;
              border-color: #87cefa;
            }

            .symbol {
              margin-right: 6px;
            }
          }
        }

        .custom-amount {
          width: 120px;
          height: 54px;

          :deep(.el-input__wrapper) {
            height: 54px;
          }
        }
      }

      .wallet {
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 16px;

        .amount {
          font-weight: 600;
        }
      }
    }

    .right {
      flex: 1;
      background: #f5f7fa;
      padding: 20px;
      height: 100%;

      .card {
        padding: 16px;

        & + .card {
          margin-top: 20px;
        }

        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 12px;
        }

        .rates {
          color: #606266;
          font-size: 13px;
          line-height: 22px;
        }

        .mt16 {
          margin-top: 16px;
        }

        .divider {
          height: 1px;

          margin: 16px 0;
        }

        .payable {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .payable-label {
            font-size: 18px;
            font-weight: 600;
          }

          .payable-amount {
            color: #12b886;
            font-size: 20px;
            font-weight: 700;
          }
        }
      }
    }
  }
}

.draw-content {
  padding: 0px;
}

.el-descriptions__body {
  background-color: transparent;
}
</style>
